<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="en">
<head>
    <base href="${pageContext.request.contextPath}/">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>四川工商学院失物招领系统后台管理</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css" >
    <script src="../static/js/jquery-2.1.1.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="../static/js/sweetalert.min.js"></script>
    <link rel="stylesheet/less" type="text/css" href="../static/css/bk.style.less" >
    <script src="../static/js/less.min.js" type="text/javascript"></script>
</head>
<body>
<div class="bk-container">
    <div class="bk-left">
        <ul class="bk-left-ul">
            <ul class="bk-left-ul">
                <li ><span class="glyphicon glyphicon-home"></span><a href="javascript:void(0)">概述</a></li>
                <li><span class="glyphicon glyphicon-zoom-in"></span><a href="javascript:void(0)">寻物启事</a></li>
                <li class="active"><span class="glyphicon glyphicon-comment"></span><a href="javascript:void(0)">招领启事</a></li>
            </ul>
        </ul>
    </div>
    <div class="bk-top">
        <h4 class="title">四川工商学院失物招领系统后台管理<span>1.0</span></h4>
        <div class="info">
            <span>尊敬的系统管理员，您好！</span>
            <span class="logout" id="logout"><span class="glyphicon glyphicon-log-in" style="padding-right: 8px"></span>注销</span>
        </div>
    </div>
    <div class="bk-content">
        <div id="bk-lost">
            <div class="bk-card">
                <div class="bk-wige">
                    <div class="bk-wige-content">
                        <div style="height: 20%">
                            <form action="bg/queryAll1" class="form-inline text-left" role="form" method="post" >
                                <div class="col-md-12">
                                    <p style="border-left: 2px #0d8ddb solid;padding-left: 8px;font-size: 14px;font-weight: 700">筛选条件:</p>
                                    <div class="col-md-10" style="margin-left: 4%">
                                        <div class="form-group laflostinput">
                                            <label class="control-label" for="found-category">类别</label>
                                            <select class="form-control" name="cateId" id="found-category">
                                                <option value="">全部</option>
                                                <c:forEach var="item" items="${cateList}">
                                                    <option  value="${item.cateId}" <c:if test="${item.cateId eq cateId}" >selected</c:if> >${item.cateName}</option>
                                                </c:forEach>
                                            </select>
                                        </div>
                                        <div class=" form-group laflostinput" style="margin: 6px 0">
                                            <label class="control-label" for="found-category">丢失时间</label>
                                            <input class="form-control" type="date" name="lowDate" value="<fmt:formatDate value="${lowTime}" pattern="yyyy-MM-dd" />" id="found-lowDate">&nbsp;至
                                            <input class="form-control" type="date" name="hiDate" value="<fmt:formatDate value="${hiTime}" pattern="yyyy-MM-dd" />" id="found-hiDate">
                                        </div>
                                        <br>
                                        <div class="form-group laflostinput">
                                            <label class="control-label" for="found-category">物品关键词</label>
                                            <input class="form-control" type="text" name="title" value="${title}"  id="found-key" placeholder="请输入物品关键词">
                                        </div>
                                        <div class="form-group laflostinput">
                                            <button class="btn btn-info small" type="submit">筛选</button>
                                            <button class="btn  small" type="reset">清空</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="bk-card-content">
                            <ul>
                                <c:if test="${Page != null}">
                                    <c:forEach var="item" items="${Page}" varStatus="stat">
                                        <li id="lost-${stat.index}">
                                            <a href="javaScript:void(0)" onclick="toShow('${item.noticeId}','${stat.index}')" >
                                                <c:if test="${fn:length(item.title)>12}">
                                                    <p title="${item.title}">${fn:substring(item.title,0,12)}...</p>
                                                </c:if>
                                                <c:if test="${fn:length(item.title)<=12 and fn:length(item.title)!=0}">
                                                    <p title="${item.title}">${item.title}</p>
                                                </c:if>
                                                <hr>
                                                <c:choose>
                                                    <c:when test="${item.image1 != null and fn:length(fn:trim(item.image1))>0}">
                                                        <img src="image/upload/${item.image1}"  alt="启事图片">
                                                    </c:when>
                                                    <c:when test="${item.image2 != null and fn:length(fn:trim(item.image2))>0}">
                                                        <img src="image/upload/${item.image2}"  alt="启事图片">
                                                    </c:when>
                                                    <c:when test="${item.image3 != null and fn:length(fn:trim(item.image3))>0}">
                                                        <img src="image/upload/${item.image3}"  alt="启事图片">
                                                    </c:when>
                                                    <c:otherwise>
                                                        <img src="image/notImage.png" alt="启事图片" title="该启事暂无图片">
                                                    </c:otherwise>
                                                </c:choose>
                                                <p><b><span>${item.scope.locName}</span>-<span>寻物启事</span></b></p>
                                                <c:if test="${fn:length(item.describe)>12}">
                                                    <p title="${item.describe}">${fn:substring(item.describe,0,12)}...</p>
                                                </c:if>
                                                <c:if test="${fn:length(item.describe)<=12 and fn:length(item.describe)!=0}">
                                                    <p title="${item.describe}">${item.describe}</p>
                                                </c:if>
                                                <c:if test="${fn:length(item.describe)==0}">
                                                    <p title="启事发布人很懒，没有留下启事的描述信息">启事发布人很懒，没有留下...</p>
                                                </c:if>
                                                <p><fmt:formatDate value="${item.noticeTime}" pattern="yyyy-MM-dd" />发布</p>
                                            </a>
                                        </li>
                                    </c:forEach>
                                </c:if>
                                <c:if test="${Page.size() le 0 }">
                                    <div style="width: 100%;text-align: center">
                                        <img align="center" src="image/noData.png" alt="" />
                                    </div>
                                </c:if>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">启事详情</h4>
            </div>
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <table class="table">
                        <tr>
                            <td align="center">
                                启事标题:
                            </td>
                            <td id="title">
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                失物类别:
                            </td>
                            <td id="cate">
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                拾取时间:
                            </td>
                            <td id="time">
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                拾取范围:
                            </td>
                            <td id="scope">
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                具体地点:
                            </td>
                            <td id="location">
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                描述图片:
                            </td>
                            <td id="image">
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                详细描述:
                            </td>
                            <td id="desc">
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                联系人:
                            </td>
                            <td id="linkMan">
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                联系电话:
                            </td>
                            <td id="phone">
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                联系人QQ:
                            </td>
                            <td id="qq">
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                邮箱:
                            </td>
                            <td id="email">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="toCancel()">取消</button>
                <button type="button" class="btn btn-danger" onclick="toDel()">删除</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
    let notice={};
    let index;
    //显示启事信息
    function toShow(id,i){
        index=i;
        $.get('/bg/queryOne/'+id).then(res=>{
            if(res.resultCode===0){
                notice=res.data;
                $('#title').text(notice.title);
                $('#cate').text(notice.cate.cateName);
                $('#scope').text(notice.scope.locName);
                $('#time').text(notice.noticeTime);
                $('#location').text(notice.location);
                $('#desc').text(notice.describe);
                $('#linkMan').text(notice.linkMan);
                $('#phone').text(notice.phone);
                $('#qq').text(notice.qq);
                $('#email').text(notice.email);
                $('#image').children('img').remove();
                if(notice.image1){
                    $('#image').append('<img width="50" height="50" src="image/upload/'+notice.image1+'" alt="启事图片">');
                }
                if(notice.image2){
                    $('#image').append('<img width="50" height="50" src="image/upload/'+notice.image2+'" alt="启事图片">');
                }
                if(notice.image3){
                    $('#image').append('<img width="50" height="50" src="image/upload/'+notice.image3+'" alt="启事图片">');
                }

                $('#myModal').modal('show');
            }
        });
    }
    //删除启事信息
    function toDel(){
        let id=notice.noticeId;
        swal({
            title:'删除启事',
            text:'请删除该启事后，系统将抹除该启事的所有信息',
            icon:'warning',
            buttons:['取消','删除']
        }).then((willDelete)=>{
            if(willDelete){
                $.get('/bg/delete/'+id)
                    .then(res=>{
                        let re=JSON.parse(res);
                        if (re.status==='0') {
                            swal('删除成功',{icon:'success'});
                            console.log($('#found-ul').find("li").eq(index).text());
                            $('#lost-'+index).remove();
                            $('#myModal').modal('hide');
                        }else if(re.status==='-1'){
                            swal('删除失败',{icon:'error'});
                        }else if(re.status==='1'){
                            window.location.href="/laf/bg";
                        }
                    });
            }
        });


    }
    //清空模态框内容
    function toCancel(){
        notice={};
        $('#myModal').modal('hide');
    }
    $('#logout').click(function () {
        window.location.href="bg/logOut";
    });
    $('.bk-left-ul li').click(function () {
        switch ($(this).text()) {
            case '概述':{
                window.location.href="/bg/index";
            }break;
            case '寻物启事':{
                window.location.href="/bg/queryAll0";
            }break;
            case '招领启事':{
                window.location.href="/bg/queryAll1";
            }break;
            default:break;
        }
    });

</script>
</body>
</html>
